<template>
    <div class="header">
        <h1>{{ title }}</h1>
        <i v-if="$routerHistory.canBack()" @click="back" class="cubeic-back"></i>
        <div class="extend">
            <slot></slot>
        </div>
    </div>
</template>
<script>
export default {
    name: 'HeaderView',
    props: {
        title: {
            type: String,
            default: '',
            required: true
        },        
    },
    methods: {
        back() {
            this.$router.goBack()
        }
    }
}
</script>


<style lang="stylus" scoped>
.header {
    position: relative;
    height: 44px;
    line-height: 44px;
    text-align: center;
    background-color: #edf0f4;
    .cubeic-back {
        position: absolute;
        left: 0;
        top: 0;
        padding: 0 15px;
        color: #fc915b;
    }
    .extend {
        position: absolute;
        right: 0;
        top: 0;
        padding: 0 15px;
        color: #fc915b;
    }
}
</style>